<template>
 <div>
	 <!-- 头部滑动 -->
				<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<div class="mui-scroll">
						<a :class="['mui-control-item',item.id==0?'mui-active':'']" v-for="item in cate" :key="item.id" @click="getPhotoList(item.id)">
							{{item.title}}
						</a>	
					</div>
				</div>
			</div>
<!-- 图片加载 -->
		<ul class="photolist">
  		<router-link v-for="item in PhotoList" :key="item.add_time" :to="'/home/photoinfo/'+item.id" tag="li">
    	<img v-lazy="item.img_url">
			<div class="title-box">
				<h5 v-html="item.title"></h5>
				<p v-html="item.content"></p>
			</div>
  		</router-link>
</ul>
 </div>
</template>

<script>
import mui from '../../../lib/mui/js/mui.min.js'
export default {
	data(){
		return{
			cate:[],
			PhotoList:[]
		}
	},
	created(){
		this.getAllCategory();
		this.getPhotoList(0)
	},
  mounted(){
		//当组件中dom结构 被渲染到页面中后，会执行此钩子函数
	mui('.mui-scroll-wrapper').scroll({
	deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
	});
	},
	methods: {
		getAllCategory(){
			//获取所有图片的分类，信息为图片的ID和分类
			this.$http.get("api/getimgcategory").then((result)=>{
				if(result.body.status===0){
					 result.body.message.unshift({title:"全部",id:0})
					this.cate =result.body.message
				}
			})
		},
		getPhotoList(cateid){
			this.$http.get("api/getimages/"+ cateid).then((result)=>{
				console.dir(cateid)
				if(result.body.status === 0){
							console.log(result.body.message)
							this.PhotoList = result.body.message;
			
				}
			})
		}
	}
}
</script>
<style lang="less" scoped>
	 * { touch-action: pan-y; };
	 .photolist{
		
		 list-style: none;
		 margin:0;
		 padding: 0 5px;
		 li{
			  position: relative;
			 text-align: center;
			 margin-bottom: 5px;
			 box-shadow: 0 0 6px #888;
			 img{
				 width: 100%;
				 vertical-align: middle
			 }
			 .title-box{
						position:absolute;
						bottom: 0;
						font-size:12px;
						background-color: rgba(0 0 0 0.4);
						h5 {
							font-size:13px;
							color:white;
							text-align: left
						}
						p{
							font-size:12px;
							color: white;
							text-align: left;
							margin: 0;
							padding:0;
						}
				}
		 }
		 image[lazy=loading] {
					width: 40px;
					height: 300px;
					margin: auto;
					}
					
	 	} 
</style>
